<template>
    <view>
        <view class="mb-8">
            <tm-filterMenu @confirm="confirm" :fixed="true" :margin="[0, 0]" :padding="[0, 0]">
                <tm-filterMenu-item v-for="(item, index) in _filters" 
                :footerHeight="100"
                :uuid="item.key"
                :key="item.key" icon="tmicon-angle-up" un-icon="tmicon-angle-down" 
                :title="item.name">
                    <tm-radio-group  
                    direction="customCol"
                    v-model="item.checked" :default-value="item.checked">
                        <tm-radio :value="item2.id" v-for="(item2, index2) in item.list" :key="index2"
                            :custom="false">
                            <template v-slot:default="{ checked }">
                                <view :userInteractionEnabled="false" hover-class="opactiy-7"
                                    class="flex-1 flex-row flex flex-row-center-between" style="height: 76rpx">
                                    <tm-text :color="checked.checked ? 'primary' : ''" :label="item2.title"></tm-text>
                                    <tm-icon :font-size="24" color="primary" v-if="checked.checked"
                                        name="tmicon-check"></tm-icon>
                                </view>
                            </template>
                        </tm-radio>
                    </tm-radio-group>
                    <template v-slot:footer>
                        <view class="flex flex-row flex-row-center-center">
                            <tm-button form-type="filterCancel" color="#f5f5f5" class="pr-32 flex-1" block label="取消"></tm-button>
                            <tm-button form-type="filterConfirm" class="flex-1" block label="确认"></tm-button>
                        </view>
                    </template>
                </tm-filterMenu-item>
            </tm-filterMenu>
        </view>
        <!--列表-->
        <view v-if="_list.length > 0">
            <navigator :url="'/pages/user/xiangmuxiangqing?id='+item.id+'&api='+props.apiName+'&keytype='+props.keytype" class="white mb-10 px-24 py-28" v-for="(item, index) in _list" :key="index">
                <view class="text-size-g text-weight-b text-overflow-2">
                    {{ item.title }}
                </view>
                <view class="mt-24 flex flex-row flex-row-center-start flex-wrap" style="gap:24rpx 32rpx;">
                    <view v-for="(item2,index2) in item.tag_arr" :key="index2" class="c_textlist flex flex-center "
                    :style="{background:item2.color}"
                    ><text>{{ item2.text }}</text></view>
                </view>
                <view v-if="(item?.intro??false)" class="mt-24 text-overflow-2 text-size-m c_wenhui">
                    {{ item.intro }}
                </view>
                <view class="mt-24 flex flex-row flex-row-center-start">
                    <view class="flex flex-row flex-row-center-start">
                        <tm-icon :font-size="24" name="tmicon-user-fill" color="#0073FF"></tm-icon>
                        <view class="c_kd text-size-m text-blue ml-21 text-overflow-1">{{ item.realname }}</view>
                    </view>
                    <view v-if="item?.amount" class="flex flex-row flex-row-center-start ml-50">
                        <tm-icon :font-size="24" name="tmicon-transanction" color="#EA7D10"></tm-icon>
                        <text class="text-size-m c_txtchuang ml-21">{{ item.amount }}</text>
                    </view>
                </view>
                <view class="mt-22 c_ckbg"> 
                    <view  class="flex flex-row flex-row-center-center">
                        <view class="text-size-m text-blue">查看详情</view>
                        <view class="ml-10">
                            <tm-icon color="#0073FF" :line-height="0" :font-size="24" name="tmicon-arrow-right"></tm-icon>
                        </view>
                    </view>
                </view>
                <view class="pt-20 text-size-s c_qianhui">发布时间：{{ item.created_at }}</view>
            </navigator>
        </view>


    </view>
</template>
<script setup lang="ts">
import { nextTick } from 'vue';
import { watchEffect } from 'vue';
import { PropType, computed,ref } from 'vue';
const emits = defineEmits(["confirm"])
const props = defineProps({
    filters: {
        type: [Array] as PropType<any[]>,
        default: () => []
    },
    list: {
        type: Array as PropType<any[]>,
        default: () => []
    },
    apiName:{
        type:String,
        default:""
    },
    keytype:{
        type:String,
        default:""
    }
})

const _list = computed(()=>props.list)

const _filters = ref(chulifilters())




function confirm(){
    let d = chuliSumitData();
    emits('confirm',d)
}


function chuliSumitData(){
    let list = [..._filters.value]
    let submitdata = {};
    list.forEach((element: any) => {
        // @ts-ignore
        submitdata[element.key] = element.checked
    });

    return submitdata;
}

function chulifilters(){
    let list = [...props.filters]
    list.forEach((element: any) => {
        let defaultId = element?.list[0]?.id??"";
        element.checked = defaultId
        return list;
    });
    return list;
}
function reset(){
	let list = [...props.filters]
	list.forEach((element: any) => {
	    element.checked = ""
	    return list;
	});
	
	_filters.value = [...list]
}


defineExpose({
    updateFilter:()=>{
        _filters.value = []
        nextTick(()=>{
            _filters.value = chulifilters()
        })
        
    },
	reset
})
</script>

<style>
.c_textlist {
    border-radius: 6rpx;
    color: #ffffff;
    font-size: 26rpx;
    padding: 8rpx 16rpx;
}

.c_ckbg {
    background: #F7F7F7;
    width: 702rpx;
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 16rpx;
}

.c_kd {
    width: 248rpx;
}
</style>